<template>
	<div>
		<el-row class="main" type="flex" justify="center">
			<el-col :span="16">
				<div id="artcle-info">
					<h2 class="text-center"><strong style="word-wrap:break-word">{{article.article_title}}</strong></h2>
					<!-- 描述：文章信息 -->
					<div class="text-center timeAndView">
						<span class="article-time">
							<i class="el-icon-time"></i>
							发表于：<span>{{article.article_date}}</span>
						</span>
						&nbsp;|&nbsp;
						<span class="article-views">
							<i class="el-icon-view"></i>
							阅读量：<span>{{article.article_views}}</span>
						</span>
					</div>
					<p class="abstract">
						前言：html是世界上最好的编程语言。
					</p>
				</div>
				<hr />
				<div id="article-content">
					<p v-html="article.article_content"></p>
				</div>
				<div id="statement">
					<div class="item">{{$t('article.author')}}：{{article.user.user_name}}</div>
					<div class="item">{{$t('article.originalLink')}}：
						<a href="http://www.annan.vip/" target="_blank">http://www.annan.vip/</a>
					</div>
					<div class="item">{{$t('article.copyright')}}：本博客所有文章除特别声明外,转载请注明出处!</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {getArticle} from "@/api/article";
	export default {
		name: 'articleRead',
		data(){
			return{
				article:{
					"article_id":0,
					"user_id":null,
					"article_title":"",
					"article_content":"",
					"article_views":0,
					"article_comment_count":0,
					"article_date":"2020-01-01 00:00:00",
					"article_like_count":0,
					'user':{
						'user_id':0,
						'user_name':'匿名',
						'user_phone':0
					}
				},
			}
		},
		async mounted() {
			this.article = await getArticle(this.$route.path.split('/')[this.$route.path.split('/').length-1]);

		}
	}
</script>

<style scoped>
	#artcle-info {
		padding: 20px;
		background-image: url(../assets/vue.jpg);
		margin-bottom: 40px;
	}

	#artcle-info .abstract {
		color: #ffffff;
		border-left: 3px solid #F56C6C;
		padding: 10px;
		background-color: rgba(126, 129, 135, 0.3);
	}

	#artcle-info .timeAndView {
		padding: 20px;
		line-height: 30px;
		font-size: 16px;
		color: #ffffff;
	}

	pre.has {
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.8);
	}

	img.has {
		width: 100%;
	}

	#statement {
		border-left: 3px solid #F56C6C;
		padding: 20px;
		background-color: #EBEEF5;
	}
</style>
